<template>
  <el-card class="mt20">
    <el-row>
      <span class="section-title">企业科创经纪人</span>
    </el-row>
    <el-row class="mt20" v-if="state.show">
      <el-col :span="12">
        <span>联系人：</span>
        <span>{{ state.data.realName }}</span>
      </el-col>
      <el-col :span="12">
        <span>联系方式：</span>
        <span>{{ state.data.mobilePhone }}</span>
      </el-col>
    </el-row>
    <el-row class="mt20" v-else>
      <el-col :span="24">
        <span>暂无科创经纪人信息！</span>
      </el-col>
    </el-row>
  </el-card>
</template>
<script lang="ts" setup>
import {ref, reactive, onMounted, watch} from 'vue';
import {queryEnterpriseBroker} from "/@/api/entEntry/broker";

const props = defineProps({
  entId: {
    type: String,
    default: ''
  }
})
const state = reactive({
  show: true,
  data: {
    realName: '',
    mobilePhone: ''
  },
});

const getEnterpriseBroker = async (entId: string) => {
  try {
    const enterpriseBrokerRes = await queryEnterpriseBroker(entId);
    if (enterpriseBrokerRes.success && enterpriseBrokerRes.data != null) {
      state.data = enterpriseBrokerRes.data;
      state.show = true;
      return;
    }
    state.show = false;
  } catch (error) {
    console.error('请求错误:', error);
  }
};

const init = () => {
  if (props.entId && props.entId !== '') {
    getEnterpriseBroker(props.entId);
  }
};

watch(() => props.entId, (newVal) => {
  if (newVal) {
    init();
  }
});

defineExpose({
  init
})
</script>
<style lang="scss" scoped>

.section-title {
  font-size: 18px;
  font-weight: bold;
}

.mt20 {
  margin-top: 20px;
}
</style>